<template>
  <view>
    <view class="content">

      <image class="logo" src="/static/img.png"></image>

      <view class="wrap">
        <u-toast ref="uToast"></u-toast>
        <u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                @change="codeChange"></u-code>
      </view>

      <view class="text-area">

        <view class="getcode-wrap">
          <u--input
              v-model="phoneNumber"
              placeholder="请输入手机号"
              border="bottom"
              clearable
          ></u--input>

          <view class="getcode-btn-warp">
            <u-button
                :customStyle="{color: 'rgb(240, 169, 160)', border: 'unset'}"
                @tap="getCode">{{ tips }}
            </u-button>
          </view>
        </view>

        <view class="inputcode">
          <u--input
              v-model="inputCode"
              placeholder="请输入验证码"
              border="bottom"
              clearable
          ></u--input>
        </view>

        <u-button @click="login" text="登录"
                  type="primary"
                  color="rgb(240, 169, 160)"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>

import {generateCaptcha, validatePhoneNumber} from '@/config/util/util';
import {
  // getLoginUserInfo,
  phoneLogin
} from '@/config/api.js'
import {getLoginUserInfo} from "@/config/util/common";

export default {
  data() {
    return {
      tips: '',
      // refCode: null,
      seconds: 10,


      //本地验证密码
      captcha: "1111",
      phoneNumber: "15111111111",
      inputCode: "1111"

    };
  },

  methods: {
    async login() {
      //校验手机号码
      if (!validatePhoneNumber(this.phoneNumber)) {
        uni.$u.toast('手机号不符合规范');
        return;
      }

      //校验验证码
      if (!this.inputCode) {
        uni.$u.toast('验证码错误');
        return;
      }
      if (this.inputCode != this.captcha) {
        uni.$u.toast('验证码错误');
        return;
      }

      //进行登录
      //异步请求
      // let res = await phoneLogin(this.phoneNumber);
      let _that = this;
      uni.showLoading({title: "登录中..."})
      phoneLogin(this.phoneNumber).then(res => {
        _that.$store.dispatch("setToken", res.token);

        // getLoginUserInfo().then(info => {
        //   //保持用户信息
        //   _that.$store.dispatch("login", info.user);
        //   uni.hideLoading();
        //   // uni.$u.toast("登录成功")
        //
        //   uni.switchTab({
        //     url: "/pages/index/index"
        //   })
        // })


        getLoginUserInfo(()=>{
            uni.hideLoading();
            // uni.$u.toast("登录成功")

            uni.switchTab({
              url: "/pages/index/index"
            })
        })

      }).catch(e => {

      })


    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {

      //校验手机号码
      if (!validatePhoneNumber(this.phoneNumber)) {
        uni.$u.toast('手机号不符合规范');
        return;
      }

      //发送验证码
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          const cap = generateCaptcha(4);
          this.captcha = cap;
          uni.$u.toast('验证码已发送[' + cap + "]");
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      // uni.$u.toast('倒计时结束');
    },
    start() {
      // uni.$u.toast('倒计时开始');
    }
  }
}
</script>

<style scoped lang="scss">

.getcode-wrap {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid $sys-color-grey-170;

  .getcode-btn-warp {

    /deep/ uni-button:after {
      border: unset !important;
    }

    /deep/ uni-button {
      border: unset !important;
    }

    /deep/ button:after {
      border: unset !important;
    }

    /*    .getcode-btn {
          color: $sys-color-pink;
          border: unset;
        }*/
  }

}

.inputcode {
  border-bottom: 1px solid $sys-color-grey-170;
  margin-bottom: $sys-margin-top-50 !important;
}

.text-area {
  width: 90%;
  margin: 0 auto;
  margin-top: $sys-margin-top-100;
  margin-bottom: 100rpx;
}

.logo {
  height: 150rpx;
  width: 150rpx;
  margin-top: $sys-margin-top-200;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: $sys-margin-bottom-50;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
